<template>
  <div id="app">
    <p>{{arr[arr.length-1]}}</p>
    <button @click="updateName">updateName</button>
  </div>
</template>

<script>
// import Vue from 'vue'
// !哪些情况？
// #1 通过索引或下标修改数组里面的元素
// !为什么？
// 错误说法：Vue2 响应式的原理是 Object.defineProperty，但是这个 API 不支持劫持数组（x）
// 正确原因：就是因为性能问题（性能代价和获得的用户体验收益不成正比）
// !怎么解决？
// 1. 使用数组的变更/变异方法 splice
// 2. this.$set 或 Vue.set
// 3. this.$forceUpdate() 强制更新
export default {
  name: 'App',
  data() {
    return {
      arr: ['吕布', '典韦', '董卓', '貂蝉']
    }
  },
  methods: {
    updateName() {
      this.arr[this.arr.length - 1] = '赵云'
      this.$forceUpdate()
      // this.arr.splice(3, 1, '赵云')
      // this.$set(对象或数组, key或索引, 值)
      /* this.$set(this.arr, this.arr.length - 1, '赵云')
      Vue.set(this.arr, this.arr.length - 1, '赵云') */
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
